<template v-title data-title="首页">
    <div>
        <!-- top头部 -->
        <HeadContainer></HeadContainer>
        <!-- 焦点图 -->
        <div class="index_focus">
            <a href="javascript:;" class="index_focus_pre" style="opacity: 1; display: none;"></a>
            <a href="javascript:;" class="index_focus_next" style="opacity: 1; display: none;"></a>
            <div class="bd">
                <ul style="position: relative; width: 1567px; height: 340px;">
                    <li style="position: absolute; width: 1567px; left: 0px; top: 0px; display: none;">
                        <a href="../assets/images/1-200201112333555.jpg" width="1567px"></a>
                    </li>
                    <li style="position: absolute; width: 1200px; left: 0px; top: 0px; display: list-item;">
                        <a href="#" class="pic" target="_blank">
                            <img class="pic" src="../assets/images/1-200201112353K1.jpg" width="1567px">
                        </a>
                    </li>
                    <li style="position: absolute; width: 1200px; left: 0px; top: 0px; display: none;">
                        <a href="#" class="pic" target="_blank">
                            <img class="pic" src="../assets/images/1-2002011125480-L.jpg" width="1567px">
                        </a>
                    </li>
                    <li style="position: absolute; left: 0px; top: 0px; display: none;">
                        <a href="#" class="pic" target="_blank">
                            <img class="pic" src="../assets/images/1-2002011126100-L.jpg" width="1567px">
                        </a>
                    </li>

                </ul>
            </div>
            <div class="slide_nav">
                <a href="javascript:;" class=""></a>
                <a href="javascript:;" class="on"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
        <!-- 焦点图 End -->
        <!-- 新课上线 -->
        <div class="outwrap-course-new">
            <div class="container">
                <div class="recomend">新课上线
                    <router-link class="text-more" to="/courseList" target="_blank" rel="nofollow">全部课程</router-link>
                </div>
                <ul class="content_list clearfix">
                    <li class="content_item" v-for="course in courseTopFour">
                        <a @click="toCourseDetail(course.id)" class="link" :title="course.title" target="_blank">
                            <img class="course-img-bg lazy-img" :src="course.cover" style="display: block;">
                            <em class="jishu">共{{ course.lessonNum }}课时全</em>
                            <div class="main_title">{{ course.title }}</div>
                            <p class="price" style="">￥{{course.price}}</p>
                            <div class="sub_title">{{ course.buyCount }}次购买</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 新课上线 End -->
        <!-- 精选专辑 -->
        <div class="outwrap-recomend">
            <div class="container">
                <div class="recomend">精选好课<a class="text-more" href="#ketop/" target="_blank" rel="nofollow">查看更多</a>
                </div>
                <ul class="content_list clearfix">
                    <li class="content_item">
                        <a href="#course/17/" class="link" title="如何用6系统创建一个符合SEO的网站" target="_blank">
                            <img class="course-img-bg lazy-img" data-original="#uploads/2001/1-20012G4563K54.jpg"
                                 src="">
                            <em class="jishu">O集全</em>
                            <div class="main_title">如何用6系统创建一个符合SEO的网站</div>
                            <p class="price" style="display:none">￥99</p>
                            <div class="sub_title">次学习</div>
                        </a>
                    </li>
                    <li class="content_item">
                        <a href="#course/30tcwbdzdgs/" class="link" title="30天成为百度知道营销高手（入门篇）" target="_blank">
                            <img class="course-img-bg lazy-img" data-original="#uploads/2001/1-200116160922432.jpg"
                                 src="">
                            <em class="jishu">O集全</em>
                            <div class="main_title">30天成为百度知道营销高手（入门篇）</div>
                            <p class="price" style="display:none">￥299</p>
                            <div class="sub_title">次学习</div>
                        </a>
                    </li>
                    <li class="content_item">
                        <a href="#course/dxwzslzd/" class="link" title="大型网站SEO总监修炼之道" target="_blank">
                            <img class="course-img-bg lazy-img" data-original="#uploads/2001/1-200116160A5261.jpg"
                                 src="">
                            <em class="jishu">O集全</em>
                            <div class="main_title">大型网站SEO总监修炼之道</div>
                            <p class="price" style="display:none">￥299</p>
                            <div class="sub_title">次学习</div>
                        </a>
                    </li>
                    <li class="content_item">
                        <a href="#course/baidubaike/" class="link" title="百度百科零基础入门到精通" target="_blank">
                            <img class="course-img-bg lazy-img" data-original="#uploads/2001/1-20011615534QL.jpg"
                                 src="">
                            <em class="jishu">O集全</em>
                            <div class="main_title">百度百科零基础入门到精通</div>
                            <p class="price" style="display:none">￥68</p>
                            <div class="sub_title">次学习</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 精选专辑 End -->
        <!--  尾部组件  -->
        <FooterContainer></FooterContainer>
    </div>
</template>

<script>
    import HeadContainer from '@/views/HeadContainer'
    import FooterContainer from '@/views/FooterContainer'
    import course from "@/api/course";

    export default {
        name: "index",
        components: {HeadContainer, FooterContainer},
        data() {
            return {
                courseTopFour: []
            }
        },
        methods: {

            //跳转到详情页面
            toCourseDetail(id){
                this.$router.push({path:"/courseDetail/" + id})
            },

            initHotCourse() {
                course.findHotCourse().then(resp => {
                    this.courseTopFour = resp.data;
                });
            }

        },
        created() {
            this.initHotCourse();
        }
    }
</script>

<style src="@/assets/css/v2_index.css" scoped></style>

